<template>
    <div class="cmt-contaier">
   <h3>发表评论</h3>
   <hr>
   <textarea placeholder="请输入要BB的内容啊(最多BB120个字啊)" maxlength="120"></textarea>
   <mt-button type="primary" size="large">发表评论</mt-button>

        <div class="cmt-list" v-for="(item,i) in comments" :key="i">
            <div class="cmt-item">
                <div class="cmt-title">
                    第{{ i+1 }}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间:{{ item.add_time |dataFormat }}
                </div>
                <div class="cmt-body">{{ item.content === '' ? '该用户非常懒，甚至懒得BB' : item.content}}</div>
            </div>
        </div>

   <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>



<script>
    export default {
        data() {
            return {
                pageindex: 1,
                comments: []
            }
        },
        created() {
            this.getUserReviews()
        },
        methods: {
            getUserReviews() {

                this.axios.get('/api/getcomments/' + this.id + '?pageindex=' + this.pageindex).then(result => {
                    // console.log(result);
                    if (result.data.status === 0) {
                        this.comments = this.comments.concat(result.data.message)
                    }else {
                        Toast('评论加载失败')
                    }

                })
            },
            getMore(){
                this.pageindex++
                this.getUserReviews()
            }
        },
        props: ['id']
    }
</script>

<style lang="scss" scoped>
    .cmt-contaier {
        h3 {
            font-size: 18px;
        }
        textarea {
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list {
            margin-top: 10px;
            .cmt-item {
                font-size: 14px;
                .cmt-title {
                    line-height: 36px;
                    background-color: #ccc;
                }
                .cmt-body {
                    text-indent: 2em;
                    line-height: 36px;
                }
            }
        }
    }
</style>